<template>
	<view class="common-bg">
		<view class="pad-20">
			<uni-nav-bar :statusBar="true" :border="false" color="#222" backgroundColor="transparent" left-icon="left" leftText=""
				:title="$t('manage.manage')" @clickLeft="clickLeft" right-icon="plusempty" @clickRight="clickRight" />
			<view class="list-box m-t-40">
				<view class="item shadow" v-for="(item, index) in collectSetList" :key="index" @click="doDetail(item.id)">
					<view class="left">
						<!-- <image class="img" src="/static/logo.png" mode="aspectFill"></image> -->
						<view class="img" :style="{background: item.background_color }">

						</view>
						<view class="">
							<view class="font-16 font-500 col-000-8">
								{{item.collection_name}}
							</view>
							<view class="num font-11 col-000-4">
								{{item.pattern_count}}{{$t('mine.pattern')}}
							</view>
						</view>
					</view>
					<view class="right">
						<uni-icons style="margin-right: 40rpx;" type="right" size="20" color="rgba(0,0,0, 0.4)"></uni-icons>
						<view class="" @click.stop="doDel(item.id)">
							<uni-icons type="trash" size="20" color="rgba(0,0,0, 0.4)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-box" v-if="collectSetList.length == 0">
				<view class="m-t-40">
					<view class="empty-img">
						<image class="img-100" src="/static/svg/empty.svg" mode="widthFix"></image>
					</view>
					<view class="empty-text">
						{{ $t('manage.empty') }}
					</view>
					<view class="btn col-fff font-14 font-500 flex-center-center m-t-40" @click="clickRight">
						<!-- 去创建 -->
						{{ $t('manage.create') }}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus" :contentText="contentText" v-if="collectSetList.length > 0 &&collectSetList.length > params.limit"></uni-load-more>
		
		<!-- 添加收藏集 -->
		<addColecton ref="ref_addColecton" @addSuccess="resetSearch" />
		
		<!-- <confirmPopup title="删除" content="确认要删除该收藏集吗？" confirmText="删除" ref="ref_confirm_delete" @cancel="canelDelete" @confirm="confirmDelete" /> -->
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
	import addColecton from '../ucenter/com-add-colection/index.vue'
	import collectionApi from '@/api/collection.js';
	import confirmPopup from '@/components/diy-popup/index.vue'
	export default {
		data() {
			return {
				collectSetList: [],
				params: {
					page: 1,
					limit: 20,
					total: 0
				},
				contentText: {
					contentdown: "轻轻上拉",
					contentrefresh: "加载中",
					contentnomore: "没有更多数据了",
				},
			}
		},
		components: {
			uniNavBar,
			addColecton,
			confirmPopup
		},
		created() {
			this.contentText.contentdown = this.$t('loadContentText.contentdown');
			this.contentText.contentrefresh = this.$t('loadContentText.contentrefresh');
			this.contentText.contentnomore = this.$t('loadContentText.contentnomore');
			this.getCollectList()
		},
		onReachBottom() {
			this.getCollectList();
		},
		onPullDownRefresh() {
			this.resetSearch()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			resetSearch() {
				this.params.page = 1;
				this.params.limit = 20;
				this.getCollectList(true)
			},
			getCollectList(isReset = false) {
				let pageNo = this.params.page;
				let pageSize = this.params.limit;
				let totalpage = this.params.total;
				if (totalpage + 1 <= (pageNo - 1) * pageSize) {
					this.loadStatus = "nomore";
					return;
				}
				this.loadStatus = "loading";
				collectionApi.getCollectionList(this.params).then(res => {
					if(res.errCode == 0) {
						if (isReset) {
							this.collectSetList = res.data.list;
						} else {
							this.collectSetList = this.collectSetList.concat(res.data.list);
						}
						this.params.total = res.data.total;
						this.params.page = res.data.page + 1;
					}
					this.loadStatus = "loadmore";
				})
			},
			doDetail(id) {
				uni.navigateTo({
					url: '/pages/collection/detail?collection_id=' + id
				})
			},
			doDel(collection_id) {
				let _this = this;
				uni.showModal({
					content: this.$t('manage.isDel'),
					cancelText: this.$t('settings.cancelText'),
					confirmText: this.$t('settings.confirmText'),
					success: (e) => {
						if (e.confirm) {
							collectionApi.deleteCollection({
								collection_id
							}).then(res => {
								if (res.errCode === 0) {
									_this.resetSearch()
									uni.showToast({
										title: res.errMsg,
										icon: 'none',
										duration: 3000
									});
								}
							})
						}
					}
				});
			},
			clickLeft() {
				uni.navigateBack()
			},
			clickRight() {
				this.$refs.ref_addColecton.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		.btn {
			width: 670rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 16rpx;
		}
	}

	.list-box {
		width: 100%;

		.item {
			margin-bottom: 16rpx;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.img {
					width: 76rpx;
					height: 76rpx;
					margin-right: 32rpx;
					border-radius: 4rpx;
					overflow: hidden;
					min-width: 76rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}
</style>